<script>
import myStream from '../stream/Stream';
import SearchBar from '../components/SearchBar.vue';
import TabBar from '../components/TabBar.vue';
const deviceHeight = (750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight) - 400;
const modal = weex.requireModule('modal');
export default {
    components: { TabBar, SearchBar },
    data() {
        return {
            refreshing: false,
            deviceHeight,
            activeMenu: 0,
            progress: 0,
            sliderIndex: 0
        }
    },
    computed: {
        tabData() {
            let data = this.$store.state.home.tabsData;
            return data && data.length ? data : [{}];
        }
    },
    methods: {
        gotoSeach() {
            this.$router.push({
                name: 'search'
            })
        },
        changeTab(item, index) {
            this.activeMenu = index;
            this.sliderIndex = index;
        },
        menuColor(index) {
            return this.activeMenu == index ? '#ed5b00' : '#747474';
        },
        menuBorderColor(index) {
            return this.activeMenu == index ? '#ed5b00' : '#fafafa';
        },
        sliderChanged(e) {
            // console.log(e);
            let currentIndex = e.index * 1;
            let nextIndex = currentIndex + 1;
            // let currentIndex = 1;
            this.progress = currentIndex;
            this.activeMenu = currentIndex;
            if (currentIndex && !this.tabData[nextIndex].tab_data) {
                this.getNextPageData(nextIndex);
            }
        },
        getNextPageData(index) {
            let data = this.tabData[index || 0];
            let path = data.tab_api;
            let option = {};
            option.params = {
                page_id: data.params.page_id,
                tab_index: data.params.tab_index,
                // page_index: 0,
                // phone_type: 'gemini',
                // app_name: 'UTNkPRKKwofRycJSxS/d6zd7615zqO5ff1Yq1cDEhPkbVKy/E07azVRyC4fpbKb5Lzx8snCtq1XFiZN/+9To78S1CAudTrUrEZjorzBDheo='
            };
            option.url = path;
            if (this.unwatch) this.unwatch();
            this.$store.dispatch('getTabPageData', option);
        },
        watchTabData() {
            this.unwatch = this.$watch('tabData', (val) => {
                this.getNextPageData(1);
            });
        }
    },
    created() {
        this.watchTabData();
    }
}
</script>
<template>
    <div class="page">
        <div class="header">
            <search-bar></search-bar>
            <scroller class="header-menu" scroll-direction="horizontal" :show-scrollbar="false">
                <text class="header-menu-item" v-for="(item,$index) in tabData" :style="{'color':menuColor($index),'border-bottom-color':menuBorderColor($index)}" @click="changeTab(item,$index)" :key="$index">{{item.tab_name}}</text>
            </scroller>
        </div>
        <div class="content" :style="{'height':deviceHeight}">
            <slider class="home-page-slider" @change="sliderChanged" :index="sliderIndex" :infinite="false" :style="{'height':deviceHeight}">
                <list class="scroller" v-for="(page,$index) in tabData" :key="$index" :style="{'height':deviceHeight}">
                    <cell class="scroll-page" v-if="page&&page.tab_data">
                        <div class="sections" v-for="(item,$index) in page.tab_data.sections" :key="$index">
                            <cellsAutoFill v-if="item.view_type==='cells_auto_fill'" :list="item.body.items"></cellsAutoFill>
                            <listTwoType1 v-else-if="item.view_type ==='list_two_type1'" :list="item.body.items"></listTwoType1>
                            <listOneType2 v-else-if="item.view_type ==='list_one_type2'" :data="item.body.items[0]"></listOneType2>
                            <listOneType3 v-else-if="item.view_type ==='list_one_type3'" :data="item.body.items[0]"></listOneType3>
                            <dividerLine v-else-if="item.view_type==='divider_line'" :line="item.body"></dividerLine>
                            <listBroadcast v-else-if="item.view_type==='list_broadcast'" :data="item.body"></listBroadcast>
                            <listActionTitle v-else-if="item.view_type==='list_action_title'" :list="item.body.items"></listActionTitle>
                            <horizontalScrollView v-else-if="item.view_type==='horizontal_scroll_view'" :list="item.body.items"></horizontalScrollView>
                            <swiper v-else-if="item.view_type === 'gallery_540'" :list="item.body.items"></swiper>
                        </div>
                    </cell>
                </list>
            </slider>
        </div>
        <!--<tab-bar></tab-bar>-->
    </div>
</template>
<style scoped>
.page {
    background-color: #fafafa;
    position: relative;
}

.header {
    height: 160px;
    /*position: fixed;*/
    top: 0;
    right: 0;
    left: 0;
}

.header-menu {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 25px;
    padding-right: 25px;
}

.header-menu-item {
    font-size: 30px;
    color: #747474;
    margin-left: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-bottom-color: #fafafa;
}

.menu-item-active {
    border-bottom-color: #ed5b00;
    color: #ed5b00;
}

.scroller {
    width: 750px;
    margin-bottom: 50px;
    height: 750px;
}
</style>
